<template>
	<PageWrapper>
		<view style="height: 100vh; background-color: #f5f5f5">
			<topLogo></topLogo>
			<view style="padding: 20px 20px 0; box-sizing: border-box">
				<view
					style="
						display: flex;
						background-color: #fff;
						align-items: center;
						justify-content: space-between;
						padding: 20px;
						border-radius: 8px 8px 0 0;
						border-bottom: 1px solid #f5f5f5;
					"
				>
					<text style="font-weight: 600; font-size: 20px; color: #333">老师统计</text>
					<view @click="back" style="display: flex; align-items: center; border-radius: 3px; box-sizing: border-box; padding: 8px 20px; background-color: #0052d9">
						<text style="font-size: 18px; padding-top: 3px; box-sizing: border-box; color: #fff; margin-right: 9px">返回</text>
						<image src="/static/back.png" style="width: 18px; height: 18px" mode=""></image>
					</view>
				</view>
			</view>
			<view style="padding: 0 20px 20px; box-sizing: border-box">
				<!-- 条件筛选 -->
				<view style="padding: 20px 20px 30px; box-sizing: border-box; background-color: #fff">
					<view style="display: flex; justify-content: space-between">
						<view style="display: flex; gap: 16px">
							<view v-for="(range, index) in timeRanges" :key="index" :class="['time-btn', { active: activeIndex === index }]" @click="handleButtonClick(index)">
								{{ range.label }}
							</view>
						</view>
						<view style="display: flex; align-items: center">
							<text style="font-size: 18px; color: #333333; margin-right: 16px">自定义周期</text>
							<view
								style="
									width: 350px;
									color: #999;
									display: flex;
									align-items: center;
									justify-content: space-around;
									padding: 8px 12px;
									box-sizing: border-box;
									border: 1px solid #333;
									border-radius: 3px;
									height: 38px;
									margin-right: 16px;
								"
							>
								<view style="width: 50%; text-align: center">
									<text @click="startDateClick" v-if="startDate == ''">开始日期</text>
									<text @click="startDateClick" v-else>{{ startDate }}</text>
								</view>
								<text style="margin: 0 15px">至</text>
								<view style="width: 50%; text-align: center">
									<text @click="endDateClick" v-if="endDate == ''">结束日期</text>
									<text @click="endDateClick" v-else>{{ endDate }}</text>
								</view>
							</view>
							<view @click="search" :class="['search_btn', { search_dis: startDate == '' || endDate == '' }]">
								<text>查询</text>
							</view>
							<!-- <button style="padding: 8px 20px; box-sizing: border-box; border-radius: 3px; background-color: #0052d9; font-size: 18px; color: #ffffff">
								<text>查询</text>
							</button> -->
							<!-- <input type="text" v-model="startDate" placeholder="开始日期" @focus="showStart = true" />
						<input type="text" v-model="endDate" placeholder="结束日期" @focus="showEnd = true" /> -->
							<u-datetime-picker @confirm="selectStartDate" @cancel="cancelStart" :show="showStart" v-model="startDateValue" mode="date"></u-datetime-picker>
							<u-datetime-picker @confirm="selectEndDate" @cancel="cancelEnd" :show="showEnd" v-model="endDateValue" mode="date"></u-datetime-picker>
						</view>
					</view>
				</view>
				<view style="padding: 0 20px 50px; box-sizing: border-box; background-color: #fff">
					<!-- <u-table2 :data="tableData" :columns="columns" :span-method="spanMethod" stripe border /> -->
					<!-- :cellStyle="cellStyleFunc" -->
					<!-- <u-table2 :data="tableData" :columns="columns" :span-method="arraySpanMethod" border /> -->
					<!-- 表头 -->
					<view style="display: flex; border: 1px solid #dbdbdb; border-right: none; border-bottom: none; width: 100%; height: 80px; background-color: #f3f3f3">
						<view class="tableHeaderCell">老师姓名</view>
						<view class="tableHeaderCell">识别类型</view>
						<view class="tableHeaderCell">一对一</view>
						<view class="tableHeaderCell">班课</view>
					</view>
					<view v-for="(item, index) in list" class="tableRow" :style="{ backgroundColor: index % 2 === 0 ? '' : '#f3f3f3' }">
						<view
							style="
								font-family: PingFang SC, PingFang SC;
								font-size: 20px;
								color: #333333;
								display: flex;
								justify-content: center;
								align-items: center;
								height: 160px;
								border: 1px solid #dbdbdb;
								border-top: none;
								width: 25%;
							"
						>
							{{ item.teacherName }}
						</view>
						<view style="width: 75%">
							<view style="display: flex; width: 100%">
								<view class="tableCell">人脸识别</view>
								<view class="tableCell">{{ item.oneByOne }}</view>
								<view class="tableCell">{{ item.course }}</view>
							</view>
							<view style="display: flex; width: 100%">
								<view class="tableCell">其他方式</view>
								<view class="tableCell">{{ item.oneByOne1 }}</view>
								<view class="tableCell">{{ item.course1 }}</view>
							</view>
						</view>
					</view>
				</view>
				<view style="background-color: #fff; display: flex; justify-content: center; width: 100%; padding: 0 20px; box-sizing: border-box">
					<up-pagination
						prevText="上一页"
						nextText="下一页"
						:current-page="currentPage"
						:page-size="pageSize"
						:total="list.length"
						:page-sizes="pageSizes"
						layout="prev, pager, next"
						@current-change="handleCurrentChange"
						@size-change="handleSizeChange"
					/>
				</view>
			</view>

			<FullscreenSwiper />
		</view>
	</PageWrapper>
</template>

<script setup>
import { ref, onMounted, onUnmounted, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import PageWrapper from '@/components/PageWrapper.vue';
import FullscreenSwiper from '@/components/FullscreenSwiper.vue';
import topLogo from '@/components/topLogo.vue';
import { getStudentFaceList, checkManager } from '@/api/getData.js';

const currentPage = ref(1);
const pageSize = ref(10);
const pageSizes = ref([10, 20, 30, 40, 50]);
const total = ref(100);

const handleCurrentChange = (page) => {
	console.log('当前页:', page);
	currentPage.value = page;
};

const handleSizeChange = (size) => {
	console.log('每页条数:', size);
	pageSize.value = size;
};

const list = ref([
	{ teacherName: '李雅彤', oneByOne: 3, course: 4, oneByOne1: 3, course1: 4 },
	{ teacherName: '王海平', oneByOne: 3, course: 4, oneByOne1: 3, course1: 4 },
	{ teacherName: '赵云', oneByOne: 3, course: 4, oneByOne1: 3, course1: 4 },
	{ teacherName: '艳华', oneByOne: 3, course: 4, oneByOne1: 3, course1: 4 },
	{ teacherName: '远吗', oneByOne: 3, course: 4, oneByOne1: 3, course1: 4 },
	{ teacherName: '远吗', oneByOne: 3, course: 4, oneByOne1: 3, course1: 4 },
	{ teacherName: '远吗', oneByOne: 3, course: 4, oneByOne1: 3, course1: 4 },
	{ teacherName: '远吗', oneByOne: 3, course: 4, oneByOne1: 3, course1: 4 },
	{ teacherName: '远吗', oneByOne: 3, course: 4, oneByOne1: 3, course1: 4 },
	{ teacherName: '远吗', oneByOne: 3, course: 4, oneByOne1: 3, course1: 4 },
	{ teacherName: '是谁啊', oneByOne: 3, course: 4, oneByOne1: 3, course1: 4 }
]);

const cellStyleFunc = () => {
	return {
		backgroundColor: '#090',
		textAlign: 'center',
		display: 'flex',
		justifyContent: 'center'
	};
};

// 单元格合并方法
const spanMethod = (data) => {
	const { row, column, rowIndex, columnIndex } = data;
	// 合并第一列(姓名)中相同内容的单元格
	if (columnIndex === 1) {
		if (rowIndex === 0 || rowIndex === 1) {
			if (rowIndex === 0) {
				return [2, 1]; // 合并2行1列
			} else {
				return [0, 0]; // 隐藏该单元格
			}
		} else if (rowIndex === 2 || rowIndex === 3) {
			if (rowIndex === 2) {
				return [2, 1]; // 合并2行1列
			} else {
				return [0, 0]; // 隐藏该单元格
			}
		}
	}

	// // 合并第三列(日期)中相同内容的单元格
	// if (columnIndex === 3) {
	// 	if (rowIndex === 0 || rowIndex === 1) {
	// 		if (rowIndex === 0) {
	// 			return [2, 1]; // 合并2行1列
	// 		} else {
	// 			return [0, 0]; // 隐藏该单元格
	// 		}
	// 	} else if (rowIndex === 2 || rowIndex === 3) {
	// 		if (rowIndex === 2) {
	// 			return [2, 1]; // 合并2行1列
	// 		} else {
	// 			return [0, 0]; // 隐藏该单元格
	// 		}
	// 	}
	// }
};

// 表格数据
const tableData = ref([
	{ id: 1, name: '张三', department: '技术部', position: '前端工程师', salary: 15000 },
	{ id: 2, name: '李四', department: '技术部', position: '后端工程师', salary: 16000 },
	{ id: 3, name: '王五', department: '技术部', position: '前端工程师', salary: 15500 },
	{ id: 4, name: '赵六', department: '设计部', position: 'UI设计师', salary: 14000 },
	{ id: 5, name: '钱七', department: '设计部', position: 'UX设计师', salary: 14500 },
	{ id: 6, name: '孙八', department: '市场部', position: '市场专员', salary: 12000 }
]);

// 表格列配置
const columns = reactive([
	{ title: 'ID', key: 'id', width: 80 },
	{ title: '姓名', key: 'name', width: 100 },
	{ title: '部门', key: 'department', width: 120 },
	{ title: '职位', key: 'position', width: 150 },
	{ title: '薪资', key: 'salary', width: 120 }
]);

// 合并单元格的方法
const arraySpanMethod = ({ row, column, rowIndex, columnIndex }) => {
	// 合并部门列（第3列，索引为2）
	if (columnIndex === 2) {
		// 如果是当前部门的起始行，计算合并行数
		if (rowIndex === 0 || row.department !== tableData.value[rowIndex - 1].department) {
			let rowspan = 1;
			// 计算从当前行开始，后面有多少行部门相同
			for (let i = rowIndex + 1; i < tableData.value.length; i++) {
				if (tableData.value[i].department === row.department) {
					rowspan++;
				} else {
					break;
				}
			}
			return { rowspan, colspan: 1 };
		} else {
			// 不是起始行，不显示该单元格
			return { rowspan: 0, colspan: 0 };
		}
	}

	// 其他列不合并
	return { rowspan: 1, colspan: 1 };
};
// const tableData = ref([
// 	{ id: 1, name: '苹果', amount: 10, date: '2023-01-01' },
// 	{ id: 2, name: '苹果', amount: 15, date: '2023-01-01' },
// 	{ id: 3, name: '香蕉', amount: 8, date: '2023-01-02' },
// 	{ id: 4, name: '香蕉', amount: 12, date: '2023-01-02' }
// ]);

// const columns = ref([
// 	{ title: 'ID', key: 'id', align: 'right', headerAlign: 'center' },
// 	{ title: '姓名', key: 'name', align: 'right', headerAlign: 'center' },
// 	{ title: '数量', key: 'amount', align: 'right', headerAlign: 'center' },
// 	{ title: '日期', key: 'date', align: 'right', headerAlign: 'center' }
// ]);

const search = () => {
	console.log(111);
};
const startDateValue = ref(Date.now());
const endDateValue = ref(Date.now());
const startDate = ref('');
const endDate = ref('');
const showStart = ref(false);
const showEnd = ref(false);
const startDateClick = () => {
	console.log(1);
	showStart.value = true;
};
const endDateClick = () => {
	showEnd.value = true;
};
const selectStartDate = (e) => {
	activeIndex.value = -1;
	console.log(e);
	const date = new Date(e.value);
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
	const day = String(date.getDate()).padStart(2, '0');
	startDate.value = `${year}年${month}月${day}日`;
	showStart.value = false;
};
const cancelStart = () => {
	showStart.value = false;
};
const selectEndDate = (e) => {
	activeIndex.value = -1;
	console.log(e);
	const date = new Date(e.value);
	const year = date.getFullYear();
	const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
	const day = String(date.getDate()).padStart(2, '0');
	endDate.value = `${year}年${month}月${day}日`;
	showEnd.value = false;
};
const cancelEnd = () => {
	showEnd.value = false;
};

const confirm = (e) => {
	console.log(e);
};

const activeIndex = ref(0);

const timeRanges = [{ label: '今日' }, { label: '昨日' }, { label: '近一周' }, { label: '近一月' }];

const handleButtonClick = (index) => {
	startDate.value = '';
	endDate.value = '';
	activeIndex.value = index;
	if (index == 0) {
	}
};
const studentList = ref([]);
const getStudentNoFaceList = async () => {
	try {
		uni.showLoading({
			title: '请稍候...'
		});
		console.log('未录入头像列表', campusId.value);
		const res = await getStudentFaceList({
			campusId: campusId.value,
			isHas: 0
		});
		console.log(res);
		if (res.code == 200 && res.data !== null) {
			studentList.value = res.data.map((item) => ({
				letter: item.firstLetter,
				data: item.studentList.map((student) => ({
					name: student.studentName,
					id: student.studentId,
					count: student.zongHour,
					jiaoWu: student.jiaoWu
				}))
			}));
		}
	} catch (error) {
		console.log('消课学生列表请求失败', error);
	} finally {
		setTimeout(() => uni.hideLoading(), 500);
	}
};

const managerCode = ref(null);
const callBackModal = async () => {
	if (managerCode.value) {
		uni.showLoading({
			title: '正在校验学管'
		});
		try {
			// console.log('请求参数', studentId.value, campusId.value);
			const res = await checkManager({
				studentId: studentId.value,
				campusId: campusId.value,
				managerCode: managerCode.value
			});
			if (res.code == 200) {
				console.log(111, res.data);
				uni.hideLoading();
				managerCode.value = null;
				showEnterNum.value = false;
				takePhoto.value = true;
			}
		} catch (error) {
			console.log('校验学管请求失败', error);
			uni.showToast({
				title: error.message,
				icon: 'none'
			});
			uni.hideLoading();
		}
	} else {
		uni.showToast({
			title: '工号不能为空',
			icon: 'error'
		});
	}
};
const takePhoto = ref(false);
const toTakePhoto = () => {
	// showRes.value = true;
	takePhoto.value = false;
	console.log('去拍照页面');
	uni.navigateTo({
		url: '/pages/takePhoto/takePhoto?campusId=' + campusId.value + '&studentId=' + studentId.value
	});
};
const showEnterNum = ref(false);
const jiaoWu = ref(null);
const studentId = ref(null);
let timer = null;
const bindClick = (e) => {
	// if (e.item.count == 0) {
	// 	return
	// }
	console.log(e);
	jiaoWu.value = e.item.jiaoWu;
	studentId.value = e.item.id;
	showEnterNum.value = true;
	timer = setTimeout(() => {
		hide();
	}, 60000);
	// uni.navigateTo({
	// 	url: `/pages/studentSubClass/studentSubClass?id=${e.item.id}&name=${e.item.name}&campusId=${campusId.value}`
	// });
};
const back = () => {
	uni.navigateBack();
};
const hide = () => {
	managerCode.value = null;
	jiaoWu.value = null;
	showEnterNum.value = false;
	if (timer) clearTimeout(timer);
};
const cancel = () => {
	managerCode.value = null;
	jiaoWu.value = null;
	showEnterNum.value = false;
};
const Tipcancel = () => {
	managerCode.value = null;
	jiaoWu.value = null;
	takePhoto.value = false;
};

const campusId = ref(null);
onMounted(() => {});
onUnmounted(() => {
	if (timer) clearTimeout(timer);
});
onLoad((options) => {
	campusId.value = options.campusId;
	console.log(options.campusId);
});
onShow(() => {
	console.log('校区ID', campusId.value);
	getStudentNoFaceList();
});
</script>

<style scoped>
.tableRow {
	display: flex;
	width: 100%;
}
.tableCell {
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: PingFang SC, PingFang SC;
	font-size: 20px;
	color: #333333;
	width: 50%;
	border-right: 1px solid #dbdbdb;
	border-bottom: 1px solid #dbdbdb;
}
.tableHeaderCell {
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: PingFang SC, PingFang SC;
	font-weight: 600;
	font-size: 20px;
	color: #333333;
	width: 25%;
	border-right: 1px solid #dbdbdb;
	border-bottom: 1px solid #dbdbdb;
}
.search_btn {
	padding: 8px 20px;
	box-sizing: border-box;
	border-radius: 3px;
	background-color: #0052d9;
	font-size: 18px;
	color: #ffffff;
}
.search_dis {
	pointer-events: none;
	background-color: #cbdefd;
}
.time-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 8px 20px;
	border-radius: 100px;
	border: 1px solid #333;
	color: #333;
	font-size: 18px;
	cursor: pointer;
	outline: none;
	background-color: transparent;
	transition: all 0.2s ease;
}

.time-btn.active {
	border: 1px solid #0052d9;
	color: #fff;
	background-color: #0052d9;
}

.time-btn:hover {
	opacity: 0.8;
}
</style>
